<!-- custom-tabbar -->
<template name="customTabbar">
  <view :class="isIphoneX ? 'iphoneX-height' : ''" class="tabbar_box">
    <view v-for="(item, index) in tabbar.list" :key="index">
      <view
        v-if="item.isSpecial"
        class="tabbar_nav"
        :style="{ color: tabbar.selectedColor }"
        @tap="scan"
      >
        <view class="special-wrapper">
          <image class="tabbar_icon" :src="item.iconPath" />
          <!-- <scan></scan> -->
        </view>
      </view>
      <navigator
        v-else
        class="tabbar_nav"
        hover-class="none"
        :url="item.pagePath"
        :style="{ color: item.selected ? tabbar.selectedColor : tabbar.color }"
        open-type="switchTab"
      >
        <image
          class="tabbar_icon"
          :src="item.selected ? item.selectedIconPath : item.iconPath"
        ></image>
        <text>{{ item.text }}</text>
      </navigator>
    </view>
  </view>
</template>

<script>
export default {
  name: "customTabbar",

  data() {
    return {
      tabbar: {
        color: "#A8A8A8",
        selectedColor: "#12181F",
        backgroundColor: "transparent",
        borderStyle: "black",
        list: [
          {
            pagePath: "/pages/index/index",
            iconPath: "/static/index_unselect.png",
            selectedIconPath: "/static/index.png",
            text: "工作台",
          },

          {
            pagePath: "/pages/message/message",
            iconPath: "/static/message_unselect.png",
            selectedIconPath: "/static/message.png",
            text: "消息",
          },
          {
            pagePath: "/pages/scan/scan",
            iconPath: "/static/scan.png",
            text: "扫一扫",
            isSpecial: true,
          },
          {
            pagePath: "/pages/task/task",
            iconPath: "/static/task_unselect.png",
            selectedIconPath: "/static/task.png",
            text: "任务",
          },

          {
            pagePath: "/pages/ecology/ecology",
            iconPath: "/static/ecology_unselect.png",
            selectedIconPath: "/static/ecology.png",
            text: "生态",
          },
        ],
      },
      systemInfo: "",
      intercept: "",
      isIphoneX: false,
    };
  },

  methods: {
    editTabbar() {
      let tabbar = this.tabbar;
      let currentPages = getCurrentPages();
      let _this = currentPages[currentPages.length - 1];
      let pagePath = _this.route;
      pagePath.indexOf("/") != 0 && (pagePath = "/" + pagePath);
      for (let i in tabbar.list) {
        tabbar.list[i].selected = false;
        tabbar.list[i].pagePath == pagePath && (tabbar.list[i].selected = true);
      }
      this.tabbar = tabbar;
    },
    async getSystemInfo() {
      var res = await uni.getSystemInfoSync();

      this.systemInfo = res;
      this.intercept = this.systemInfo.model.substring(0, 8);

      var isX = res.statusBarHeight > 40;
      this.isIphoneX = isX ? true : false;
      console.log("这个手机是!!!!!!!!!!!" + this.isIphoneX);
    },
    scan() {
      var token = wx.getStorageSync("token");

      if (token == "") {
        //未登录

        uni.navigateTo({
          url: "../login/loginPage",
        });
        return;
      }
      var _this = this;
      uni.scanCode({
        success: function (res) {
          console.log("========" + JSON.stringify(res));
          console.log("条码类型：" + res.path);
          console.log("条码内容：" + res.result);
          var list = res.path.split("?");
          var list2 = list[1].split("=");
          if (list[0].indexOf("gift") != -1) {
            uni.navigateTo({
              url: "/pages/firstPage/giftTemp?scene=" + list2[1],
              fail: (err) => {
                console.log(JSON.stringify(err));
              },
            });
          } else {
            var str = list2[1];
            _this.beginGame(str);
          }
        },
      });
    },
    async beginGame(str) {
      wx.setStorageSync("scene", str);

      let param = {
        machineId: scene,
      };

      var res = await Api.getPayConfig(param);

      var json = res.data;
      var jsonStr = JSON.stringify(json);
      var encode = encodeURIComponent(jsonStr);
      var url = json.canPay == true ? "scanOnline" : "scanOffline";
      uni.navigateTo({
        url: "../pages/login/" + url + "?json=" + encode,
      });
    },
  },

  mounted() {
    this.getSystemInfo();
    this.editTabbar();
    //隐藏系统tabbar
    wx.hideTabBar();
    console.log("??????");
  },

  onShow() {},
};
</script>

<style lang="less">
@tagbarHeight: 98rpx;
.tabbar_box {
  background-color: #fefeff;
  background-image: url("../static/切图 6@2x.png");
  background-size: 100% 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  // height: @tagbarHeight;
  // box-shadow: 0px -4px 25px 0px rgba(0, 0, 0, 0.08);
}

.tabbar_box.iphoneX-height {
  padding-bottom: 68rpx;
}

.middle-wrapper {
  position: absolute;
  right: 310px;
  bottom: 0;
  background-color: #fff;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border-top: 2px solid #f2f2f3;
}

.middle-wrapper.iphoneX-height {
  bottom: 66rpx;
}

.tabbar_nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 20rpx;
  height: @tagbarHeight;
  position: relative;
  width: auto;
  margin-top: 32rpx;
  /* border: 1px solid red; */
}

.tabbar_icon {
  width: 52rpx;
  height: 52rpx;
}

.special-wrapper {
  position: absolute;
  top: -80rpx;
  left: -58rpx;
  width: 116rpx;
  height: 112rpx;
  text-align: center;
  box-sizing: border-box;
  /* border: 1px solid black; */
}

.special-wrapper .tabbar_icon {
  width: 116rpx;
  height: 112rpx;
}

.special-text-wrapper {
  width: 116rpx;
  height: 112rpx;
}
</style>
